---
title: Astro - Installation Guide
description: Learn how to use Material Tailwind components with Astro and Tailwind CSS to easily create elegant and flexible pages.
navigation:
  [
    "installation",
    "npm",
    "yarn",
    "pnpm",
    "tailwindcss-config",
    "with-monorepo",
    "theme-provider",
    "example",
  ]
github: guide/next
prev: installation
next: license
---

# Material Tailwind with Astro

<span id="installation" className="scroll-mt-48" />
Learn how to setup and install @material-tailwind/react with Astro.

<br />
<br />

First you need to create a new project using astro, for more details check the <a target="_blank" className="font-medium hover:text-blue-500 transition-colors" href="https://docs.astro.build/en/getting-started/?ref=material-tailwind">Astro Official Documentation</a>

```bash
npm create astro@latest
```

<br />

Then you need to install Tailwind CSS since @material-tailwind/react is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project.
To install tailwind css in your astro project run the below command, for more details check the <a target="_blank" className="font-medium hover:text-blue-500 transition-colors" href="https://docs.astro.build/en/guides/integrations-guide/tailwind/?ref=material-tailwind">Astro Integration with Tailwind CSS</a>

```bash
npx astro add tailwind
```

<br />

Then you need to install React.JS since @material-tailwind/react is a UI Components library for React and you need to add react.js to your astro project.
To install react.js in your astro project run the below command, for more details check the <a target="_blank" className="font-medium hover:text-blue-500 transition-colors" href="https://docs.astro.build/en/guides/integrations-guide/react/?ref=material-tailwind">Astro Integration with React.JS</a>

```bash
npx astro add react
```

---

<DocsTitle href="npm">
## Using NPM
</DocsTitle>

Install @material-tailwind/react as a dependency using NPM by running the following command:

<span id="npm" className="scroll-mt-48" />

```bash
npm i @material-tailwind/react
```

---

<DocsTitle href="yarn">
## Using Yarn
</DocsTitle>

Install @material-tailwind/react as a dependency using Yarn by running the following command:

<span id="yarn" className="scroll-mt-48" />

```bash
yarn add @material-tailwind/react
```

---

<DocsTitle href="pnpm">
## Using PNPM
</DocsTitle>

Install @material-tailwind/react as a dependency using PNPM by running the following command:

<span id="pnpm" className="scroll-mt-48" />

```bash
pnpm i @material-tailwind/react
```

---

<DocsTitle href="tailwindcss-config">
## TailwindCSS Configurations
</DocsTitle>

<span id="tailwindcss-config" className="scroll-mt-48" />

Once you install @material-tailwind/react you need to wrap your tailwind css configurations with the <Code>withMT()</Code> function coming from @material-tailwind/react/utils.

```js {1, 3, 9}
const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
});
```

---

<DocsTitle href="with-monorepo">
## TailwindCSS Configurations with MonoRepo
</DocsTitle>

<span id="with-monorepo" className="scroll-mt-48" />

If you're using monorepo in your project you need to add the theme and components paths to your tailwind.config.js.

```js {6,7}
const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  content: [
    "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
    "path-to-your-node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}",
    "path-to-your-node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
});
```

---

<DocsTitle href="theme-provider">
## Theme Provider
</DocsTitle>

<span id="theme-provider" className="scroll-mt-48" />

@material-tailwind/react comes with a theme provider that set's the default theme/styles for components or to provide your own theme/styles to your components. By default you don't need to wrap your project with the <Code>ThemeProvider</Code> but in case if you want to provide your own theme then you need to do the following in a Astro project.

First create a new file <Code>theme-provider.jsx</Code> on the <Code>src/components</Code> directory of your project and put the below code inside that file.

```jsx
import { ThemeProvider as MTThemeProvider } from "@material-tailwind/react";

export function ThemeProvider({ children }) {
  return <MTThemeProvider>{children}</MTThemeProvider>;
}

export default ThemeProvider;
```

<br />

Then <Code>import</Code> the <Code>theme-provider</Code> component to the <Code>pages/index.astro</Code> file and wrap all the elements inside the <Code>body</Code> with the <Code>theme-provider</Code>.

```astro {2,14,16}
---
import { ThemeProvider } from "../components/theme-provider";
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <ThemeProvider>
      <!-- Other elements and components goes there -->
    </ThemeProvider>
  </body>
</html>
```

---

<DocsTitle href="components-usage">
## Components Usage
</DocsTitle>

<span id="components-usage" className="scroll-mt-48" />

Since most of the components from @material-tailwind/react are interactive you need to use the <a target="_blank" className="font-medium hover:text-blue-500 transition-colors" href="https://docs.astro.build/en/reference/directives-reference/#client-directives">`client:load`</a> directive to enable those interactivities.

Create a new file <Code>dropdown-menu.jsx</Code> on the <Code>src/components</Code> directory of your project and put the below code inside that file.

```jsx
import {
  Menu,
  MenuHandler,
  MenuList,
  MenuItem,
  Button,
} from "@material-tailwind/react";

export default function DropdownMenu() {
  return (
    <Menu>
      <MenuHandler>
        <Button>Open Menu</Button>
      </MenuHandler>
      <MenuList>
        <MenuItem>Menu Item 1</MenuItem>
        <MenuItem>Menu Item 2</MenuItem>
        <MenuItem>Menu Item 3</MenuItem>
      </MenuList>
    </Menu>
  );
}
```

<br />

Then <Code>import</Code> the <Code>dropdown-menu</Code> component to the <Code>pages/index.astro</Code> file.

```astro {2,14}
---
import DropdownMenu from "../components/dropdown-menu";
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <DropdownMenu client:load />
  </body>
</html>
```

---

<DocsTitle href="example">
## Example
</DocsTitle>

Now you're good to go and use @material-tailwind/react in your project.

<CodePreview id="example" component={
  <Menu>
    <MenuHandler>
      <Button>Open Menu</Button>
    </MenuHandler>
    <MenuList>
      <MenuItem>Menu Item 1</MenuItem>
      <MenuItem>Menu Item 2</MenuItem>
      <MenuItem>Menu Item 3</MenuItem>
    </MenuList>
  </Menu>
}>
```astro
---
import DropdownMenu from "../components/dropdown-menu";
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <DropdownMenu client:load />
  </body>
</html>
```
</CodePreview>
